<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设置',
  },
}
</route>

<template>
  <view class="container w-full h-full flex flex-col">
    <wd-navbar
      title="设置"
      left-text="计算器"
      left-arrow
      safeAreaInsetTop
      :bordered="false"
      @click-left="handleClickLeft"
    ></wd-navbar>
    <view class="layout-content">
      <view class="section">
        <view class="section-title">主题</view>
        <view class="section__theme-box">
          <view
            class="section__theme-box__item"
            :class="[calculatorStore.curTheme === item.name ? 'active' : 'normal']"
            v-for="item in calculatorStore.themeList"
            :key="item.name"
            @click="changeTheme(item.name)"
          >
            <image :src="item.themeImg" mode="aspectFill" />
          </view>
        </view>
      </view>
      <view class="section">
        <view class="section-title">按键设置</view>
        <view class="section-item switch">
          <view class="section-item__label">按键音效</view>
          <wd-switch
            v-model="calculatorStore.openBtnAudio"
            active-color="#f19b38"
            inactive-color="#dedde2"
            size="46rpx"
          />
        </view>
        <view class="section-item switch">
          <view class="section-item__label">振动</view>
          <wd-switch
            v-model="calculatorStore.openBtnVibrate"
            active-color="#f19b38"
            inactive-color="#dedde2"
            size="46rpx"
          />
        </view>
      </view>
      <view class="section">
        <view class="section-title">计算结果</view>
        <view class="section-item switch">
          <view class="section-item__label">显示千分位</view>
          <wd-switch
            v-model="calculatorStore.showComma"
            active-color="#f19b38"
            inactive-color="#dedde2"
            size="46rpx"
          />
        </view>
        <view class="section-item switch">
          <view class="section-item__label">点击等号清空算式框</view>
          <wd-switch
            v-model="calculatorStore.isEqualClear"
            active-color="#f19b38"
            inactive-color="#dedde2"
            size="46rpx"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useCalculatorStore } from '@/store/calculator'

const calculatorStore = useCalculatorStore()

const handleClickLeft = () => {
  uni.navigateBack()
}

const changeTheme = (themeName) => {
  if (calculatorStore.curTheme === themeName) return
  calculatorStore.curTheme = themeName
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.layout-content {
  padding: 20rpx 32rpx;
}

.section {
  &:not(:first-child) {
    margin-top: 50rpx;
  }
}

.section-title {
  margin-bottom: 32rpx;
  font-size: 32rpx;
  color: #848388;
}

.section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .section-item__label {
    font-size: 36rpx;
    color: #333;
  }

  .section-item__content {
    display: flex;
  }

  &.switch {
    &:not(:first-child) {
      margin-top: 40rpx;
    }
  }
}

.section__theme-box {
  display: flex;
  align-items: center;
  padding: 32rpx;
  background-color: rgb(239 238 243 / 30%);

  .section__theme-box__item {
    $borderRadius: 12rpx;

    position: relative;
    box-sizing: content-box;
    width: 100rpx;
    height: 200rpx;
    overflow: hidden;
    border-radius: $borderRadius;

    image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &:not(:first-child) {
      margin-left: 50rpx;
    }

    &.normal {
      box-shadow: 2rpx 6rpx 10rpx 2rpx #00000035;
    }

    &.active {
      border: 2px solid #f19b38;
    }
  }
}
</style>
<style>
.wd-navbar__arrow,
.wd-navbar__text {
  color: #4577da !important;
}
</style>
